import React from "react";
import { Toast } from "antd-mobile";

export default class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toMax: false,
      id: props.match.params.id,
      status: props.match.params.status, //1--课程订单  2--活动订单
      paytype: 3, //4--支付宝  3--微信  2--鲜花  1-积分
      rmb: 0,
      flower: 0,
      money: 0,
      data: [],
      pid: 0,
      initiate: 0,
      sid: 0,
      idd: 0,
      type: 0,
    };
    console.log(props);
  }
  componentDidMount() {
    document.title = "支付";
    const initiate = this.props.location.query.initiate;
    const sid = this.props.location.query.sid;
    const type = this.props.location.query.type;

    console.log("initiate: ", initiate);
    this.setState({
      initiate: initiate,
    });
    this.setState({
      sid: sid,
      type: type,
    });
    global.Ajax.hhtc_request("year/pay_info", {
      initiate: type,
    }).then((data) => {
      console.log("data: ", data);
      if (data.code === 1) {
        this.setState({
          money: data.data,
        });
      }
    });
  }
  // 选择支付方式
  check(paytype) {
    this.setState({
      paytype,
    });
  }
  // 支付
  pay() {
    if (this.state.paytype === "") {
      return Toast.fail("请选择支付方式!", 1);
    }
    Toast.loading();

    if (this.state.type === 0) {
      // 年费支付
      global.Ajax.hhtc_request("year/pay", {}).then((data) => {
        console.log("data: ", data);
        Toast.hide();
        if (data.code === 1) {
          this.weixinpay(data.data);
        } else {
          Toast.fail(data.msg, 1);
        }
      });
    } else {
      // 拼团支付
      global.Ajax.hhtc_request("year/spell_pay", {
        initiate: this.state.initiate,
        sid: this.state.sid,
      }).then((data) => {
        console.log("data: ", data);
        Toast.hide();
        if (data.code === 1) {
            this.weixinpay(data.data);
          // this.pay1();
        } else {
          Toast.fail(data.msg, 1);
        }
      });
    }
  }
  pay1() {
    global.Ajax.hhtc_request("year/spell_user", {
      initiate: this.state.initiate,
      sid: this.state.sid,
    }).then((data) => {
      console.log("data: ", data);
      Toast.hide();
      if (data.code === 1) {
          this.weixinpay(data.data);
        this.props.history.goBack();
      } else {
        Toast.fail(data.msg, 1);
      }
    });
  }

  weixinpay(paydata) {
    var _this = this;
    console.log(paydata);
    const onBridgeReady = "";
    if (typeof WeixinJSBridge === "undefined") {
      if (document.addEventListener) {
        document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
      } else if (document.attachEvent) {
        document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
        document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
      }
    } else {
      window.WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: paydata.appid,
          timeStamp: paydata.timeStamp,
          nonceStr: paydata.nonceStr,
          package: paydata.package,
          signType: "MD5",
          paySign: paydata.paySign,
        },
        function (res) {
          if (res.err_msg === "get_brand_wcpay_request:ok") {
            return Toast.success("支付成功", 1, () => {
              // TODO 支付成功
              // window.location.reload();
              // this.props.history.push('/page/home/my/order/orderlist/2');

              _this.props.history.goBack();

              // _this.props.history.replace('/page/home/user/vip');
              // window.location.href='https://yikan.cdhhtc.cn/#/page/home/user/orderlist';
            });
          } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
            Toast.info("取消支付", 1);
          } else if (res.err_msg === "get_brand_wcpay_request:fail") {
            Toast.info("支付失败", 1);
          }
        }
      );
    }
  }

  render() {
    return (
      <div className='pay_box'>
        <p className='p1'>支付金额</p>
        <div className='pri'>
          {this.state.paytype !== 2 && <span>￥</span>}
          <p>{this.state.money * 1}</p>
          {/* <spn style={{padding: '3vw 3vw 0'}}>+</spn>
                    <p>26</p> */}
          {this.state.paytype === 2 && (
            <img alt='' src={require("../../imgs/hua.png")} className='hua' />
          )}
        </div>
        <p className='xz'>选择支付方式</p>
        {/* <div className='pay_item'>
                    <img alt='' src={require('../../imgs/alipay.png')} className='icon' />
                    <p>支付宝</p>
                    {this.state.paytype===4?<img alt='' src={require('../../imgs/gou3.png')} className='gou' />:<img alt='' src={require('../../imgs/gou1.png')} className='gou' onClick={this.check.bind(this,4)} />}
                </div> */}
        <div className='pay_item'>
          <img alt='' src={require("../../imgs/wechat.png")} className='icon' />
          <p>微信</p>
          {this.state.paytype === 3 ? (
            <img alt='' src={require("../../imgs/gou3.png")} className='gou' />
          ) : (
            <img
              alt=''
              src={require("../../imgs/gou1.png")}
              className='gou'
              onClick={this.check.bind(this, 3)}
            />
          )}
        </div>
        {/* <div className='pay_item'>
                    <p>积分支付(余额：{this.state.rmb*1})</p>
                    {this.state.paytype===1?<img alt='' src={require('../../imgs/gou3.png')} className='gou' />:<img alt='' src={require('../../imgs/gou1.png')} className='gou' onClick={this.check.bind(this,1)} />}
                </div> */}
        <p className='go_pay' onClick={this.pay.bind(this)}>
          立即支付
        </p>
      </div>
    );
  }
}
